<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layuiAdmin 网站用户 iframe 框</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
  <script src="../../../layuiadmin/jquery.min.js"></script>
</head>
<body>

  <div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="padding: 20px 0 0 0;">
    <div class="layui-form-item">
      <label class="layui-form-label">名字</label>
      <div class="layui-input-inline">
        <input type="text" name="name" id="name" lay-verify="required" value="{$cate.name|default=''}" placeholder="请输入名字" autocomplete="off" class="layui-input">
        <input type="hidden" id="img_name" >
        <input type="hidden" id="cate_id" value="{$cate.id|default=''}" >
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">图片1</label>
      <div class="layui-input-inline">
        <!--{if isset($cate['cate_img'])}<img class="img" width="100" height="100" src="{$cate['cate_img']|default=''}"/>-->
        <!--{else}-->
        <!--<img class="img" width="100" height="100" style="display: none" src="" />-->
        <!--{/if}-->

        <!--<form id="form1">-->
          <!--<input type="file" class="imgInput" value="" id="img_src" onchange ="uploadFile(this,1)" placeholder="" name="uploadkey">-->
        <!--</form>-->

        <div class="layui-upload">
          <button type="button" class="layui-btn" id="test1">上传图片</button>
          <div class="layui-upload-list">
            {if isset($cate['cate_img'])}<img class="img" width="150px"  id="demo1" height="150px" src="{$cate['cate_img']|default=''}"/>
            {else}
            <img width="150px" height="150px" class="layui-upload-img" id="demo1">
            {/if}
            <p id="demoText"></p>
          </div>
        </div>
      </div>




    </div>

  </div>

  <script src="../../../layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: '../../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form', 'upload'], function(){
    var $ = layui.$
    ,form = layui.form
    ,upload = layui.upload ;
    
    upload.render({
      elem: '#layuiadmin-upload-useradmin'
      ,url: layui.setter.base + 'json/upload/demo.js'
      ,accept: 'images'
      ,method: 'get'
      ,acceptMime: 'image/*'
      ,done: function(res){
        $(this.item).prev("div").children("input").val(res.data.src)
      }
    });

      //普通图片上传
      var uploadInst = upload.render({
          elem: '#test1'
          ,url: "{:url('upload')}"
          ,before: function(obj){
              //预读本地文件示例，不支持ie8
              obj.preview(function(index, file, result){
                  $('#demo1').attr('src', result); //图片链接（base64）
              });
          }
          ,done: function(res){
              //如果上传失败
              if(res.code > 0){
                  return layer.msg('上传失败');
              }

              $('#img_name').val(res.count);
              //上传成功
          }
          ,error: function(){
              //演示失败状态，并实现重传
              var demoText = $('#demoText');
              demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
              demoText.find('.demo-reload').on('click', function(){
                  uploadInst.upload();
              });
          }
      });

  })

    function uploadFile()
    {
        var formData= new FormData(document.getElementById("form1"));
        $.ajax({
            type: 'POST',
            url: "{:url('upload_img')}",
            data: formData,
            dataType: 'json',
            timeout: 3000,
            cache: false,
            contentType: false,
            processData: false,
            success: function (res){
                if(res.data==200){
                    $('#img_name').val(res.count);
                }
                           }
        })

    }

  $(".imgInput").change(function(){
      $(".img").attr("src",URL.createObjectURL($(this)[0].files[0]));
      $(".img").show();
  });
  </script>
</body>
</html>